<template>
  <div class="container" >
    <img src="http://file.rzkeji.com/web/loveciy/img/planBanner2.jpg" class="titleImg"/>
    <div class="notice">
      <img src="http://file.rzkeji.com/web/loveciy/img/join/tip.png"/>
      <span><span>公告:</span><span>公告内容</span></span>
    </div>
    <div class="nav">
      <ul>
        <li @click="go('daily')" :class="{'select':selectClass.dailyClass}">
           <img src="http://file.rzkeji.com/web/loveciy/img/join/task.png"/>
           <span>日常任务</span>
        </li>
        <li @click="go('order')" :class="{'select':selectClass.orderClass}">
           <img src="http://file.rzkeji.com/web/loveciy/img/join/order.png"/>
           <span>订单任务</span>
        </li>
      </ul>
    </div>
    <task v-if="selectClass.dailyClass"></task>
    <order v-else></order>
  </div>
</template>

<script>
import order from '@/components/orderTask'
import task from '@/components/joinTask'
export default {
  data () {
    return {
     selectClass:{
      dailyClass:true,
      orderClass:false
     }
    }
  },

  components: {
      task,
      order
  },

  methods: {
    go(value)
    {
     if(value=='daily')
      {
        this.selectClass.dailyClass=true;
        this.selectClass.orderClass=false;
      }else{
        this.selectClass.orderClass=true;
        this.selectClass.dailyClass=false;
      }
    }
  },

  created () {

  }
}
</script>

<style scoped>
.container{width: 100%;background: #d9d9d9;min-height: 100%;}
.titleImg{width: 100%;height: 166px;}
.notice{width: 100%;height: 35px;background: #fff}
.notice img{width: 25px;height: 25px;margin-top: 5px;vertical-align: middle;margin-left: 20px;}
.notice span{width: 300px;height: 25px;vertical-align: middle;line-height: 25px;margin-left: 4px;font-size: 16px;}
.notice span span:nth-of-type(1){color: red}

.nav{width: 100%;height: 40px;background: #fff;margin-top: 10px;}
.nav ul{width: 100%;height: 40px;display: flex;justify-content: row;}
.nav ul li{width: 50%;height: 40px;text-align: center;line-height: 40px;font-size: 16px;}
.nav ul li.select{color: red}
.nav ul li img{width: 30px;height: 30px;vertical-align: middle;}
.nav ul li span{margin-left:5px;vertical-align: middle;}
</style>
